import React, { Suspense } from 'react';

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

import routes from './routes';

import './common/style/web.css';
import './common/style/mobile.css';
import './common/style/reset.css';

import Home from './mobile/pages/Home';
import NotFind from './mobile/pages/NotFind'

function App() {

  const createRoutes = (routes) => {
    return routes.map((item, idx) => (
      <Route
        key={idx}
        path={item.path}
        element={<item.component/>}
      >
        { item.children ? createRoutes(item.children) : null }
      </Route>
    ));
  }

  return (
    <div className="w-app" style={{ overflowX: 'hidden' }}>
      <Suspense fallback={<div></div>}>
        <Router>
          <Routes>
            <Route path='/' element={<Home/>}/>
            { createRoutes(routes) }
            <Route path='*' element={<NotFind/>}/>
          </Routes>
        </Router>
      </Suspense>
    </div>
  );
}

export default App;
